<template>
    <div>
      <!-- 面包屑 -->
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: 'allCourseTask' }">管理员</el-breadcrumb-item>
        <el-breadcrumb-item  >课程设计任务</el-breadcrumb-item>
        <el-breadcrumb-item>教学大纲管理</el-breadcrumb-item>
      </el-breadcrumb>
  
      <div><h2>课程设计任务教学大纲</h2></div>
  
      <!-- 筛选表格内容 -->
      <el-row :gutter="20" style=" margin-top: 20px; ">        
        <el-col :span="1">
          <div class="grid-content ep-bg-purple">
            <el-button  type="primary" @click="goto" style="background-color: #545c64;">添加</el-button>
          </div>
        </el-col>  
        <el-col :span="3">
          <div class="grid-content ep-bg-purple">
            <el-select v-model="selectDate" class="m-2" placeholder="选择学期" style="margin-left: 10px;">
              <el-option
                v-for="item in courseDate"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple">
            <el-select v-model="selectMajor" class="m-2" placeholder="选择课程">
              <el-option
                v-for="item in majorOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple">
            <el-select v-model="selectClass" class="m-2" placeholder="选择班级">
              <el-option
                v-for="item in courseOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content ep-bg-purple">
            <el-input
            v-model="inputSearch"
            class="w-50 m-2"
            placeholder="搜索"
            :prefix-icon="Search"
            style="width: auto; margin-right: 10px;"
            />
            <el-button type="primary" :icon="Search" style="background-color: #545c64;">Search</el-button>
          </div>
        </el-col>
      </el-row> 
  
      <!-- 表格1 -->
        <el-table :data="tableData" height="550" style="width: 100%; margin-top: 10px;">
          <el-table-column prop="courseDate" label="时间"  />
          <el-table-column prop="schemaName" label="大纲名称"  />
          <el-table-column prop="teacherName" label="负责老师" />
          <el-table-column prop="courseName" label="课程" />
          <el-table-column prop="className" label="班级" />
          <el-table-column fixed="right" label="详情" width="120">
            <template #default="scope">
                <el-popover placement="right" :width="400" trigger="click">
                <template #reference>
                    <el-button link type="primary" size="small" >详情</el-button>
                </template>
                <h2 style="text-align: center;">教学目标</h2>
                <div style="background-color: #f5f5f5; margin-top: 5px; border: 1px solid; border-radius: 5px;min-height: 100px;padding: 5px;">
                    <el-text class="mx-1" size="large">{{ scope.row.teachPlan }}</el-text>
                </div>
                </el-popover>
            </template>        
          </el-table-column>      
        </el-table>
    </div>
  </template>
  <script setup>
  import { ArrowRight, Calendar, Search, Plus } from '@element-plus/icons-vue'
  import { ref , onBeforeMount } from 'vue'
  import requests from '@/api/ajax';

  import { useRouter } from 'vue-router'
  const router_useRouter = useRouter()

 //   挂载前进行
// onBeforeMount(() => {
//   //初始显示老师所有的发布题目
//   const asd = requests({ url: "/" + teacherId, method: "get", }).then(res => {
//     //存储用户信息到浏览器toke    
//     const abc = res.rdata
//     mySchema.value = abc
//     console.log(myPublish.value.length)
//   })
//     .catch(err => {
//       console.error(err.data);
//       // 登录请求失败后的操作
//     });

//     //请求获取老师可选择的班级
//   const acd = requests({ url: "/course/course", method: "get", }).then(res => {
//     //存储用户信息到浏览器toke
//     const abc = res.rdata
//     courseOptions.value = abc

//   })
//     .catch(err => {
//       console.error(err.data);
//       // 登录请求失败后的操作
//     });

//   //获取老师可选择的班级和课程编号
//   const aad = requests({ url: "/course/class", method: "get", }).then(res => {
//     //存储用户信息到浏览器toke
//     const abc = res.rdata
//     classNum.value = abc
//     // console.log(classNum.value)

//   })
//     .catch(err => {
//       console.error(err.data);
//       // 登录请求失败后的操作
//     });
//   // console.log(myPublish.value)


// })
onBeforeMount(() => {
  //初始显示老师所有的发布题目
  const asd = requests({ url: "admin/coursePublish", method: "get", }).then(res => {
    //存储用户信息到浏览器toke

    const abc = res.rdata
    mySchema.value = abc
    console.log(mySchema.value.length)
  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });
  })


  const mySchema = ref([{
    schemaId:'',
    schemaName: '',    
    teachPlan:'',
    courseId:'',
    courseName:'',    
    courseDate:'',
    classId:'',
    className:'',
    majorId:'',
    majorName:'',
  }])  

  //筛选大纲时间
  const courseDate = [
  {
      value: 'Option1',
      label: '2019年6月',
    },
    {
      value: 'Option2',
      label: '2019年12月',
    },
    {
      value: 'Option3',
      label: '2020年6月',
    },
    {
      value: 'Option4',
      label: '2020年12月',
    },
  ]

   // 筛选专业类型
  const majorOptions = [
    {
      value: 'Option1',
      label: '大数据科学与技术系',
    },
    {
      value: 'Option2',
      label: '互联网应用开发与优化',
    },
    {
      value: 'Option3',
      label: '金融方向',
    },
  ]
  
  // 筛选课程类型
  const courseOptions = [
    {
      value: 'Option1',
      label: 'RB软工互191',
    },
    {
      value: 'Option2',
      label: 'RB软工互192',
    },
    {
      value: 'Option3',
      label: 'RB软工互193',
    },
    {
      value: 'Option4',
      label: 'RB软工互194',
    },
  ]
  
  // 表格1数据
  const tableData = [
    {
      courseDate: '2023-6',
      schemaName: '基础编程',
      courseName:'C语言程序设计',
      teacherName:'C老师',
      className:'RB软工互192',
      teachPlan:'学生熟练使用html,css和js'
    },
    {
      courseDate: '2023-6',
      schemaName: '基础编程',
      courseName:'C语言程序设计',
      teacherName:'C老师',
      className:'RB软工互192',
      teachPlan:'学生熟练使用html,css和js'
    },
    {
      courseDate: '2023-6',
      schemaName: '基础编程',
      courseName:'C语言程序设计',
      teacherName:'C老师',
      className:'RB软工互192',
      teachPlan:'学生熟练使用html,css和js'
    },
    {
      courseDate: '2023-6',
      schemaName: '基础编程',
      courseName:'C语言程序设计',
      teacherName:'C老师',
      className:'RB软工互192',
      teachPlan:'学生熟练使用html,css和js'
    },
    {
      courseDate: '2023-6',
      schemaName: '基础编程',
      courseName:'C语言程序设计',
      teacherName:'C老师',
      className:'RB软工互192',
      teachPlan:'学生熟练使用html,css和js'
    },
    
  ]

  //搜索框绑定的数据
  const inputSearch =ref('')
  
  //日期筛选绑定值
  const selectDate = ref('')

  //班级筛选绑定值
  const selectMajor = ref('')

  //班级筛选绑定值
  const selectClass = ref('')

  function goto (){
    router_useRouter.push({ path: 'courseschemaadd' })
  }

  </script>